<template>
	<view class="RangeCalendar">
		<up-calendar 
			:show="show" 
			:mode="mode"
			:showTitle="false"
			rowHeight="110"
			@close="closePicker"
			@confirm="confirmPicker">
		</up-calendar>
		<view class="picker-text">
			<view class="picker-text-start" @click="clickPicker()" :style="startDate === '开始时间' ? 'color: #BEBEBE;' : ''">{{startDate}}</view>
			<view class="picker-text-line">-</view>
			<view class="picker-text-end" @click="clickPicker()" :style="endDate === '结束时间' ? 'color: #BEBEBE;' : ''">{{endDate}}</view>
			<view class="picker-text-clear" @click="clearPicker()" v-if="startDate !== '开始时间' || endDate !== '结束时间'">
				<u-icon name="close-circle" color="#BEBEBE" size="32"></u-icon>
			</view>
			<view class="picker-text-image" @click="clickPicker()">
				<up-image :show-loading="true" src="https://zxtest001.oss-cn-beijing.aliyuncs.com/l-owner-uni3/picker-symbol-date-line.png" width="30rpx" height="30rpx"></up-image>
			</view>
		</view>	
	</view>	
</template>

<script setup>
	/**
	 * @author:  xphu
	 * @description 【H5组件】日期范围组件
	 * @param { mode } 为range可以选择日期范围
	 * @desc - 使用方式 
	 * <Picker mode="range"  @confirm-picker="confirmPicker" @clear-picker="clearPicker" ></Picker>  
	 * @来源 https://uiadmin.net/uview-plus/components/calendar.html
	 */
	
	import dayjs from 'dayjs';
	
	// 控件默认值
	const valueData = ref(dayjs().valueOf());
	
	// 日期控件显示
	const show  = ref(false);
	
	// 开始日期
	const startDate = ref('开始时间');
	// 结束日期
	const endDate = ref('结束时间');
	
	// 选择开始日期还是结束日期，默认开始时间
	const selectDate = ref('startDate');
	
	const props = defineProps({
	    mode:{ type:String, default:'range'}, 
	})
	
	const emit = defineEmits(['confirm-picker','clear-picker'])
	
	// 关闭
	const closePicker = ()=>{
		show.value = false
		uni.showTabBar()
	}
	
	// 确定
	const confirmPicker = (val)=>{
		startDate.value = val[0];
		endDate.value = val[val.length - 1]
	    emit('confirm-picker',{startDate:startDate.value,endDate:endDate.value});
		uni.showTabBar()
		closePicker()
	}
	
	// 清空
	const clearPicker = ()=>{
		startDate.value = '开始时间';
		endDate.value = '结束时间';
		emit('clear-picker',{startDate:'',endDate:''});
	}
	
	// 日期控件-点击
	let clickPicker = ()=>{
		uni.hideTabBar()
		show.value = true
	} 
	
</script>

<style scoped lang="scss">
	::v-deep .u-calendar{
		margin-bottom: 100rpx !important;
	}
	.RangeCalendar{
		.picker-text{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 500rpx;
			height: 64rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 32rpx;
			&-start{
				width: 200rpx;
				height: 32rpx;
				text-align: center;
			}
			&-line{
				width: 40rpx;
				height: 32rpx;
				color: #BEBEBE;
				text-align: center;
			}
			&-end{
				width: 200rpx;
				height: 32rpx;
				text-align: center;
			}
			&-clear{
				width: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			&-image{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
			}
		}
		
	}
</style>